<template>
  <el-aside width="200px">
      <el-scrollbar > 
        <el-menu background-color="#909399">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
              <User />
              </el-icon>
              学生管理
            </template>
            <el-menu-item-group>
              <template #title>学生信息</template>
              <el-menu-item index="1-1" @click="totable"><el-icon><List /></el-icon>学生列表</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><Avatar /></el-icon> 组织管理
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><Management /></el-icon>课程管理
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><ElemeFilled /></el-icon>成绩统计
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="4-1">Option 1</el-menu-item>
              <el-menu-item index="4-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="4-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="4-4">
              <template #title>Option 4</template>
              <el-menu-item index="4-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name:'Aside',
  setup(){
    const router = useRouter()
    const totable=function(){
      router.push('/index/table')
    }
    return {totable}
  }
  
};
</script>

<style scoped>
.el-icon{
  margin: 0 !important;
  margin-top: -3px !important;
}
.el-menu{ border:0!important;}
.el-menu /deep/ .el-menu-item-group__title{
  color: #606266 !important;
}
.el-scrollbar /deep/.el-scrollbar__thumb {
  background: #E6E8EB;
}
</style>